/*
 * @Description:userStore
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2022-08-22 17:18:50
 */
import { defineStore, storeToRefs } from 'pinia'
let state = reactive({
  name: '',
  age: '',
  sex: '',
  routes: [] as any
})
const userStore = defineStore('userStore', {
  /** state==>必须是一个方法 && 返回值为对象 */
  state: () => state,
  getters: {
    getName: state => state.name,
    getAge: state => state.age,
    getSex: state => state.sex
  },
  actions: {
    /**设置路由 */
    setRoutes() {
      return new Promise<void>((resolve, reject) => {
        setTimeout(() => {
          this.routes = [1, 23, 4]
          resolve()
        }, 3000)
      })
    }
  },
  /**pinia持久化方式 */
  persist: {
    enabled: true, //是否启用 "persist" 插件持久化储存
    /**策略 （配置） */
    strategies: [
      {
        key: 'userStore', //在 localStorage 或 sessionStorage 中国存储的 "key" 值
        storage: localStorage //存储方式 localStorage | sessionStorage  (默认是存储在sessionStorage的)
      }
      /*****************************持久化保留(某个字段)*******************************/
      // { storage: sessionStorage, paths: ['name', 'age'] }, //保留 name age 到 sessionStorage
      // { storage: localStorage, paths: ['sex'] } //保留 sex  到 localStorage
      /*****************************持久化保留(某个字段)end*******************************/
    ]
  }
})

/**
 * 此处定义成调用方法返回实例原因：
 * 如果在次文件中直接执行 storeToRefs(userStore()) userStore() pinia会报错，提示未挂载（是否安装）⚠️⚠️⚠️⚠️⚠️
 * */
/**将 useStore() 实例中的返回值转换成响应式 ref  */

const useStore = () => userStore() //
const storeRefs = () => storeToRefs(useStore()) // const { name } = storeRefs()  ===>这样可以拿到响应数据
/**
 * 在 .vue文件中使用:   import { useStore,storeRefs } from '@/store/user'
 * 1️⃣.设置state中的某个值：(两种方式都能改变state中的值 通过storeToRefs方法可以将其转换成响应式数据)
 * const store = useStore()
 * (1) store.name='name'
 * (2) store.setName('name')
 *
 * 2️⃣.获取某个值：
 *  (1) store.name
 *  (2) store.getName()
 */
export { useStore, storeRefs }
